<template>
  <div class="mod-home">
    <div>
      <el-alert
        title=" 您好! 欢迎登录工程车后台! "
        type="success">
      </el-alert>
      <br>
    </div>

    <div class="model" style="background: #cb5e4f">
      <div style="margin-top: 10px">当日订单数量
      </div>
      <div style="font-size: 20px">{{totalVisit}}
        <span style="font-size: 14px">次</span>
      </div>
    </div>

    <div class="model">
      <div style="margin-top: 10px">当日新增会员</div>
      <div style="font-size: 20px">{{todayVisit}}
        <span style="font-size: 14px">次</span>
      </div>
    </div>

    <div class="model" style="background: #5ccb53">
      <div style="margin-top: 10px">当日新增车主</div>
      <div style="font-size: 20px"> {{waitVisit}}
        <span style="font-size: 14px">次</span>
      </div>
    </div>

    <div class="model" style="background: #636363">
      <div style="margin-top: 10px">昨日参观</div>
      <div style="font-size: 20px">{{yesterdayVisit}}<span style="font-size: 14px">次</span></div>
    </div>
    <!--echars-->
    <div>
      <div class="mod-home" v-loading="isLoad" element-loading-text="拼命统计中..." id="order"
           style="width: 100%;height:500px;margin-bottom: 100px"></div>
    </div>
    <!--echars-->
    <div>
      <div class="mod-home" v-loading="isLoad" element-loading-text="拼命统计中..." id="order1"
           style="width: 100%;height:500px;margin-bottom: 100px"></div>
    </div>

  </div>
</template>

<script>
  import echarts from 'echarts'

  export default {
    data() {
      return {
        isLoad: false,
        todayVisit: 0,
        totalVisit: 0,
        waitVisit: 0,
        yesterdayVisit: 0,

      }
    },
    activated() {
      this.getDataList()

    },
    methods: {

      // 获取数据列表
      getDataList() {
        this.dataListLoading = true
        ;
        this.chart = echarts.init(document.getElementById("order"));
        this.chart1 = echarts.init(document.getElementById("order1"));


        this.$http({
          url: this.$http.adornUrl('/ronhe/ronhecontent/homeReport'),
          method: 'post',
          data: {
            ctType: "zixun",
          }
        }).then(({data}) => {
          console.log(data)
          if (data && data.code === 0) {

            this.todayVisit = data.todayVisit;
            this.waitVisit = data.waitVisit;
            this.yesterdayVisit = data.yesterdayVisit;
            this.totalVisit = data.totalVisit;


            let time = [];
            let value = [];
            for (var i = 0; i < data.recentlyList.length; i++) {
              let item = data.recentlyList[i];
              time.push(item.timeValue)
              value.push(item.count)
            }
            // 指定图表的配置项和数据
            // 指定图表的配置项和数据
            var option = {
              title: {
                text: '近30天预约参观人数'
              },
              tooltip: {},
              legend: {
                data: ['参观人数']
              },
              xAxis: {
                data: time
              },
              yAxis: {},
              series: [{
                name: '参观人数',
                type: 'bar',
                data: value
              }]
            };

            let option1 = {
              xAxis: {
                type: 'category',
                data: data
              },
              yAxis: {
                type: 'value'
              },
              series: [{
                data: value,
                type: 'line'
              }]
            };

            this.chart.setOption(option);
            this.chart1.setOption(option1);


          }
          this.dataListLoading = false
        })
      },


    },
    components: {}
  }
</script>

<style>
  .mod-home {
    line-height: 1.5;
  }

  .model {
    width: 120px;
    height: 80px;
    float: left;
    text-align: center;
    border-radius: 10px;
    font-weight: bold;
    color: white;
    background: #2d8cf0;
    margin-right: 20px;
    line-height: 30px;
    border: 1px solid #DEDEDE;
  }
</style>

